<div class="x-body">
    <span>
        <button class="layui-btn layui-btn-sm" onclick="AdminRoleAdd()">
            <i class="layui-icon">&#xe608;</i>添加</button>
    </span>
    <div id="AdminRoleDt" lay-filter="AdminRoleDt"></div>
</div>
<script>
    table.render({
        elem: '#AdminRoleDt',
        height: 'full-200',
        skin: 'row',
        even: true,
        size: 'sm',
        url: '__APP__/Admin/Role/view',
        where: { sort: 'id', order: 'desc' },
        limit: 5,
        limits: [1, 2, 3, 5, 10, 20],
        method: 'post',
        request: {
            page: '1',
            limit: '2'
        },
        response: {
            statusName: 'status',
            statusCode: 1,
            msgName: 'msg',
            countName: 'total',
            dataName: 'rows'
        },
        page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
            //curr:1,
            first: false,
            last: false,
            //curr: location.hash.replace('#!fenye=', ''),
            hash: 'fenye'
        },
        done: function(res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            //console.log(res);
            //得到当前页码
            //console.log(curr);
            //得到数据总量
            //console.log(count);
        },
        cols: [
            [
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', checkbox: true },
                { field: 'title', title: '名称', width: 100, fixed: 'left' },
                { field: 'rules', title: '规则', minWidth: 150 },
                {
                    field: 'nodes',
                    title: '拥有权限',
                    minWidth: 400,
                    sort: true,
                    templet: function(data) {
                        //console.log(data);
                        if (data.nodes.length != 0) {
                            if (data.nodes[0] != null) {
                                var temp = "";
                                $.each(data.nodes, function(key, val) {

                                    if(val!=null&&val!='')
                                    temp += '|' + '<span style="color:black;">' + val.title + '</span>'
                                })
                                return temp;
                            } else {
                                return '空';
                            }
                        } else {
                            return '空';
                        }
                    }
                },
                { field: 'remark', title: '备注', width: 100 },
                {
                    field: 'status',
                    title: '状态',
                    width: 100,
                    sort: true,
                    templet: function(data) {
                        //console.log(data);
                        if (data.status == 1) {
                            return '启用';
                        } else {
                            return '禁用';
                        }
                    }
                },
                { fixed: 'right',title: '操作',width: 150, align: 'center', toolbar: '#AdminRoleBar' } //这里的toolbar值是模板元素的选择器
            ]
        ]
    });
    //监听工具条
    table.on('tool(AdminRoleDt)', function(obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        // console.log(layEvent);
        // console.log(obj);
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'detail') { //查看
            alert("查看");
            //do somehing
        } else if (layEvent === 'del') {
            layer.confirm('您是否要删除当前选中的项目？', function(index) {
                //发异步删除数据
                var ids = new Array();
                ids.push(data.id);
                $.ajax({
                    url: '{:U("Role/delete")}',
                    data: { ids: ids.join(',') },
                    dataType: 'json',
                    success: function(r) {
                        if (r.status) {
                            table.reload('AdminRoleDt');
                        }
                        layer.close(index);
                        layer.msg(r.info);
                    }
                });
            });
        } else if (layEvent === 'edit') {
            $.post('__URL__/edit?id=' + data.id, {}, function(str) {
                layer.open({
                    type: 1,
                    anim: 1,
                    offset: 't',
                    area: ['900px', '730px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    title: "编辑",
                    content: str, //注意，如果str是object，那么需要字符拼接。
                    success: function(layero, index) {
                        data.layerindex = index;
                        // console.log(data);
                        fillForm('#AdminRoleEdit', data);
                        // $("#AdminRoleEdit>select[name='pid']").val(o.pid);
                    }
                });
            });
        } 
    });
    /*添加*/
    function AdminRoleAdd() {
        $.post('{:U("Role/add")}', {}, function(str) {
            layer.open({
                type: 1,
                anim: 1,
                offset: 't',
                area: ['1000px', '730px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                title: "编辑",
                content: str
            });
        });
    }
</script>
<script type="text/html" id="AdminRoleBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <!-- 这里同样支持 laytpl 语法，如： -->
    {{# if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a> {{# } }}
</script>